<template>
  <div class="count">
    <!-- 
      如果想要获取某个真实DOM 我们需要使用ref属性,值是一个名字,未来通过这个名字获取DOM
     -->
    <h1 ref="abc">{{count}}</h1>
    <button @click="add(num)">累加</button>
    <button @click="getabc">打印组件实例</button>
  </div>
</template>

<script>
export default {
    name:'Count',
    props:{
        num:{
            type:Number,
        },
        id:{
            type:String,
            require:true,
            default:Date.now(),
        }
    },
    data(){
        return {
            count:0,
        };
    },
    methods:{
        add(num){
            this.count+=num;
        },
        getabc(){
          
     console.log(this);
     
        }
    }
}
</script>

<style>
    .count{
        background-color: blue;
        height: 200px;
    }
</style>